<template>
    <div class="detail" v-if="bookinfo">
        <div class="page">
        <div class="content">
            <header>
                <a href="javascript:history.go(-1)">
                    <svg t="1626271676108" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2001" width="16" height="16"><path d="M733.090909 977.454545a23.202909 23.202909 0 0 1-16.453818-6.818909l-442.181818-442.158545a23.202909 23.202909 0 0 1 0-32.907636l442.181818-442.205091a23.249455 23.249455 0 1 1 32.907636 32.907636L323.816727 512.023273l425.728 425.704727A23.249455 23.249455 0 0 1 733.090909 977.454545z" fill="" p-id="2002"></path></svg>
                </a>
                <h1 class="header-title">{{bookinfo.title}}</h1>
                <div class="header-operate">
                  <router-link to="search">
                        <svg t="1626271988203" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2892" width="16" height="16"><path d="M921.3 874L738.1 690.8c51.3-62.6 82.1-142.5 82.1-229.6 0-200.1-162.8-363-363-363-200.1 0-363 162.8-363 363s162.8 363 363 363c87 0 167-30.8 229.6-82.1L870 925.3c7.1 7.1 16.4 10.6 25.7 10.6s18.6-3.5 25.7-10.6c14.1-14.2 14.1-37.2-0.1-51.3zM166.8 461.2c0-160.1 130.3-290.4 290.4-290.4s290.4 130.3 290.4 290.4-130.3 290.4-290.4 290.4-290.4-130.3-290.4-290.4z" p-id="2893"></path></svg>
                    </router-link>
                    <a href="javascript:void(0)">
                        <svg t="1626272033437" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6190" width="16" height="16"><path d="M972.8 153.6H51.2a51.2 51.2 0 0 0 0 102.4h921.6a51.2 51.2 0 0 0 0-102.4zM972.8 473.6H51.2a51.2 51.2 0 0 0 0 102.4h921.6a51.2 51.2 0 0 0 0-102.4zM972.8 793.6H51.2a51.2 51.2 0 0 0 0 102.4h921.6a51.2 51.2 0 0 0 0-102.4z" p-id="6191" fill="#bfbfbf"></path></svg>
                    </a>
                </div>
            </header>
            <div class="guide">
                <div class="guide-one">
                    <img :src="'http://statics.zhuishushenqi.com'+bookinfo.cover">
                    <div class="book-info">
                        <div class="book">
                            <img :src="'http://statics.zhuishushenqi.com'+bookinfo.cover">
                            <div class="book-cell">
                                <h2 class="book-title">{{bookinfo.title}}</h2>
                                <div class="book-author">
                                    <a href="javascript:void(0)">{{bookinfo.author}}</a>
                                </div>
                                <div class="book-score gray">{{bookinfo.rating.score}}分/{{bookinfo.rating.tip}}</div>
                                <div class="book-meta">{{bookinfo.cat}}</div>
                                <!-- bookinfo.wordCount -->
                                <div class="book-meta">{{bookinfo.wordCount | wordcount}} | 连载</div>
                            </div>
                        </div>
                        <div class="book-btns">
                            <ul class="btn-group">
                                <li class="btn-group-cell">
                                    <router-link :to="{path:'/read',query:{id:bookinfo._id}}">免费试读</router-link>
                                    <!-- <a href="javascript:void(0)">免费试读</a> -->
                                </li>
                                <li class="btn-group-cell">
                                    <a href="javascript:void(0)" @click="addshelf()">加入书架</a>
                                </li>
                                <li class="btn-group-cell mr0">
                                    <a href="javascript:void(0)" class="mr0">VIP订阅</a>
                                </li>
                            </ul>
                        </div>
                        <div class="book-detail-btn">
                            <div>
                                <a href="javascript:void(0)">
                                    <div style="color: white; line-height: 1.5; font-size: 1rem;">下载APP</div>
                                    <div style="color: white; line-height: 1.5; font-size: 0.75rem;">新人免费读，天天领福利</div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                        <div class="module module-merge">
                            <section :class="['book-summary',ismore?'':'enabled']">
                                <content>
                                    {{bookinfo.longIntro}}
                                </content>
                                <span class="book-summary-more" @click="ismore = !ismore">
                                    <svg t="1626277506281" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7049" width="16" height="16"><path d="M875.6224 313.9584c-5.2224 0-10.5472 1.9456-14.4384 5.9392L526.4384 654.6432c-3.9936 3.9936-9.216 6.0416-14.4384 6.0416s-10.4448-2.048-14.4384-6.0416L162.816 319.8976c-3.9936-3.9936-9.216-5.9392-14.4384-5.9392s-10.5472 1.9456-14.4384 5.9392c-7.9872 7.9872-7.9872 20.992 0 28.9792l349.184 349.184c7.9872 7.9872 18.432 11.9808 28.9792 11.9808 10.4448 0 20.992-3.9936 28.9792-11.9808l349.184-349.184c7.9872-7.9872 7.9872-20.992 0-28.9792-4.096-3.9936-9.4208-5.9392-14.6432-5.9392z" p-id="7050" fill="#cdcdcd"></path></svg>
                                </span>
                            </section>
                            <a href="javascript:void(0)" class="book-meta book-status">
                                <div>
                                    <div class="book-meta-l">
                                        <strong class="book-spt">目录</strong>
                                    </div>
                                    <div class="book-meta-r">
                                        <p class="gray ell" id="ariaMuLu" role="option">22小时前<span class="char-dot">·</span>{{bookinfo.lastChapter}}</p>
                                        <svg t="1626278109428" class="icon myyou" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7903" width="16" height="16"><path d="M758.488 511.053c0-9.247-4.369-17.476-11.14-22.792L340.732 81.574c-5.243-5.243-12.525-8.447-20.535-8.447-16.02 0-28.982 12.962-28.982 28.982 0 8.01 3.204 15.291 8.52 20.534l388.556 388.629-388.556 388.555c-5.243 5.243-8.52 12.525-8.52 20.535 0 16.02 12.962 28.982 28.982 28.982 8.01 0 15.219-3.277 20.535-8.52L751.06 530.496h-0.146c4.733-5.098 7.573-11.942 7.573-19.443z" p-id="7904" fill="#cdcdcd"></path></svg>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="module">
                            <ul>
                                <li>
                                    <a href="javascript:void(0)" @click="addmonth()">
                                        <svg t="1626520317745" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2021" width="16" height="16"><path d="M960.2 402.5V208.3c0-29.9-19.9-54.8-59.8-54.8H123.6c-29.9 0-59.8 24.9-59.8 54.8v199.2c49.8 5 84.7 44.8 84.7 94.6s-34.9 84.7-84.7 89.6v224.1c0 29.9 24.9 54.8 59.8 54.8h776.8c29.9 0 59.8-19.9 59.8-54.8V591.7c-39.8-10-74.7-49.8-74.7-94.6s34.8-84.6 74.7-94.6z m-109.6 99.6c0 54.8 29.9 94.6 74.7 119.5v54.8h5l-5 124.5c0 14.9-10 29.9-29.9 29.9H292.9v-1.2H258v1.2H133.5c-14.9 0-29.9-5-29.9-19.9V626.6c49.8-19.9 79.7-64.7 79.7-119.5s-34.9-99.6-79.7-119.5V218.2c0-14.9 10-29.9 29.9-29.9H258v0.1h34.9v-0.1h602.5c14.9 0 29.9 10 29.9 24.9v169.3c-44.8 25-74.7 69.8-74.7 119.6z" fill="#d81e06" p-id="2022"></path><path d="M603.3 282.8l41.8 21.7c2.5 1.2 2.5 2.5 0 3.7l-12.7 16.4 3.4 286.5c3.7 50.7-18.3 83.8-65.3 99.6 2.5-22.9-3.1-37.4-16.4-43.6-2.5-2.5-1.9-4.3 1.9-5.6 27.8 2.5 39.3-8.4 34.3-32.5l-1.9-311.8-126.8 3.7V406l107-3.7c6.2 2.5 6.2 6.2 0 10.8l-107 1.9v47c0 20.4-0.6 35-1.9 43.6l112.3-3.7c2.5 0 3.7 1.9 3.7 5.6 0 2.5-1.9 4.3-5.6 5.6l-112.3 3.7c-2.5 76.1-58.2 144.5-166.7 204.8-2.5 0-3.7-1.2-3.7-3.7-1.2-1.2-0.6-2.5 1.9-3.7 53.2-35 88.2-69.6 105.2-103.3 19.2-35 29.1-84.5 29.1-148.5v-125l-1.9-50.7c0-3.7 1.2-5 3.7-3.7l36.2 27.2 125-3.7 16.7-23.7z" fill="#d81e06" p-id="2023"></path></svg>
                                        <h5 class="book-pay-h">投月票</h5>
                                        <p class="book-pay-p">
                                            <span class="month-ticket-cnt">{{month}}</span>票
                                            <span class="char-dot">·</span>第
                                            <span class="month-ticket-rank">1865</span>位
                                        </p>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" @click="addrecommend()">
                                        <svg t="1626520317745" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2021" width="16" height="16"><path d="M960.2 402.5V208.3c0-29.9-19.9-54.8-59.8-54.8H123.6c-29.9 0-59.8 24.9-59.8 54.8v199.2c49.8 5 84.7 44.8 84.7 94.6s-34.9 84.7-84.7 89.6v224.1c0 29.9 24.9 54.8 59.8 54.8h776.8c29.9 0 59.8-19.9 59.8-54.8V591.7c-39.8-10-74.7-49.8-74.7-94.6s34.8-84.6 74.7-94.6z m-109.6 99.6c0 54.8 29.9 94.6 74.7 119.5v54.8h5l-5 124.5c0 14.9-10 29.9-29.9 29.9H292.9v-1.2H258v1.2H133.5c-14.9 0-29.9-5-29.9-19.9V626.6c49.8-19.9 79.7-64.7 79.7-119.5s-34.9-99.6-79.7-119.5V218.2c0-14.9 10-29.9 29.9-29.9H258v0.1h34.9v-0.1h602.5c14.9 0 29.9 10 29.9 24.9v169.3c-44.8 25-74.7 69.8-74.7 119.6z" fill="#d81e06" p-id="2022"></path><path d="M603.3 282.8l41.8 21.7c2.5 1.2 2.5 2.5 0 3.7l-12.7 16.4 3.4 286.5c3.7 50.7-18.3 83.8-65.3 99.6 2.5-22.9-3.1-37.4-16.4-43.6-2.5-2.5-1.9-4.3 1.9-5.6 27.8 2.5 39.3-8.4 34.3-32.5l-1.9-311.8-126.8 3.7V406l107-3.7c6.2 2.5 6.2 6.2 0 10.8l-107 1.9v47c0 20.4-0.6 35-1.9 43.6l112.3-3.7c2.5 0 3.7 1.9 3.7 5.6 0 2.5-1.9 4.3-5.6 5.6l-112.3 3.7c-2.5 76.1-58.2 144.5-166.7 204.8-2.5 0-3.7-1.2-3.7-3.7-1.2-1.2-0.6-2.5 1.9-3.7 53.2-35 88.2-69.6 105.2-103.3 19.2-35 29.1-84.5 29.1-148.5v-125l-1.9-50.7c0-3.7 1.2-5 3.7-3.7l36.2 27.2 125-3.7 16.7-23.7z" fill="#d81e06" p-id="2023"></path></svg>
                                        <h5 class="book-pay-h">投推荐票</h5>
                                        <p class="book-pay-p">
                                            <span class="month-ticket-cnt">{{recommend}}</span>周推荐票
                                            <span class="char-dot">·</span>第
                                            <span class="month-ticket-rank">1864</span>位                                        
                                        </p>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" @click="pay()">
                                        <svg t="1626520317745" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2021" width="16" height="16"><path d="M960.2 402.5V208.3c0-29.9-19.9-54.8-59.8-54.8H123.6c-29.9 0-59.8 24.9-59.8 54.8v199.2c49.8 5 84.7 44.8 84.7 94.6s-34.9 84.7-84.7 89.6v224.1c0 29.9 24.9 54.8 59.8 54.8h776.8c29.9 0 59.8-19.9 59.8-54.8V591.7c-39.8-10-74.7-49.8-74.7-94.6s34.8-84.6 74.7-94.6z m-109.6 99.6c0 54.8 29.9 94.6 74.7 119.5v54.8h5l-5 124.5c0 14.9-10 29.9-29.9 29.9H292.9v-1.2H258v1.2H133.5c-14.9 0-29.9-5-29.9-19.9V626.6c49.8-19.9 79.7-64.7 79.7-119.5s-34.9-99.6-79.7-119.5V218.2c0-14.9 10-29.9 29.9-29.9H258v0.1h34.9v-0.1h602.5c14.9 0 29.9 10 29.9 24.9v169.3c-44.8 25-74.7 69.8-74.7 119.6z" fill="#d81e06" p-id="2022"></path><path d="M603.3 282.8l41.8 21.7c2.5 1.2 2.5 2.5 0 3.7l-12.7 16.4 3.4 286.5c3.7 50.7-18.3 83.8-65.3 99.6 2.5-22.9-3.1-37.4-16.4-43.6-2.5-2.5-1.9-4.3 1.9-5.6 27.8 2.5 39.3-8.4 34.3-32.5l-1.9-311.8-126.8 3.7V406l107-3.7c6.2 2.5 6.2 6.2 0 10.8l-107 1.9v47c0 20.4-0.6 35-1.9 43.6l112.3-3.7c2.5 0 3.7 1.9 3.7 5.6 0 2.5-1.9 4.3-5.6 5.6l-112.3 3.7c-2.5 76.1-58.2 144.5-166.7 204.8-2.5 0-3.7-1.2-3.7-3.7-1.2-1.2-0.6-2.5 1.9-3.7 53.2-35 88.2-69.6 105.2-103.3 19.2-35 29.1-84.5 29.1-148.5v-125l-1.9-50.7c0-3.7 1.2-5 3.7-3.7l36.2 27.2 125-3.7 16.7-23.7z" fill="#d81e06" p-id="2023"></path></svg>
                                        <h5 class="book-pay-h">打赏</h5>
                                        <p class="book-pay-p">
                                            本周<span class="month-ticket-cnt">{{paynum}}</span>人打赏
                                            
                                        </p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="module">
                            <a href="javascript:void(0)" class="book-meta book-status">
                                <div>
                                    <div class="book-meta-l">
                                        <strong class="book-spt">粉丝榜</strong>
                                    </div>
                                    <div class="book-meta-r">
                                        <p class="gray ell funs-num" id="ariaMuLu" role="option">17.83万</p>
                                        <svg t="1626278109428" class="icon myyou" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7903" width="16" height="16"><path d="M758.488 511.053c0-9.247-4.369-17.476-11.14-22.792L340.732 81.574c-5.243-5.243-12.525-8.447-20.535-8.447-16.02 0-28.982 12.962-28.982 28.982 0 8.01 3.204 15.291 8.52 20.534l388.556 388.629-388.556 388.555c-5.243 5.243-8.52 12.525-8.52 20.535 0 16.02 12.962 28.982 28.982 28.982 8.01 0 15.219-3.277 20.535-8.52L751.06 530.496h-0.146c4.733-5.098 7.573-11.942 7.573-19.443z" p-id="7904" fill="#cdcdcd"></path></svg>
                                    </div>
                                </div>
                            </a>
                            <div class="module-content">
                                <span class="user-me">
                                    <div class="fans-li book-fans-me">
                                        <img class="fans-cover" src="http://facepic.qidian.com/qd_face/349573/-1/50" alt="">
                                        <p class="fans-name ell">
                                            <strong>我</strong>
                                            <!-- <span class="char-dot">·</span>
                                            未登录 -->
                                        </p>
                                    </div>
                                </span>
                                <div class="cell book-fans-cell">
                                    <ul class="btn-groups">
                                        <li class="btn-group-cell fans-li">
                                            <div class="rel">
                                                <i></i>
                                            </div>
                                            <img src="https://facepic.qidian.com/qd_face/349573/240/50" alt="">
                                            <div class="rel"></div>
                                            <p class="fans-name ell">书友20180709163938295</p>
                                        </li>
                                        <li class="btn-group-cell fans-li">
                                            <div class="rel">
                                                <i></i>
                                            </div>
                                            <img src="https://facepic.qidian.com/qd_face/349573/240/50" alt="">
                                            <div class="rel"></div>
                                            <p class="fans-name ell">书友20180709163938295</p>
                                        </li>
                                        <li class="btn-group-cell fans-li">
                                            <div class="rel">
                                                <i></i>
                                            </div>
                                            <img src="https://facepic.qidian.com/qd_face/349573/240/50" alt="">
                                            <div class="rel"></div>
                                            <p class="fans-name ell">书友20180709163938295</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="module">
                            <div class="module-header">
                                <div class="module-header-l">
                                    <h3 class="moudule-title">本书作者</h3>
                                </div>
                            </div>
                            <div class="module-content">
                                <ol class="book-ol book-ol-author">
                                    <li class="book-li">
                                        <a href="javascript:void(0)" class="book-layout">
                                            <div class="book-author-vv">
                                                <img src="https://facepic.qidian.com/qd_face/349573/a400848111/0" alt="" class="book-author-avatar">
                                                <div>                                   
                                                    <em class="tag-honor orange"><i>Lv.3</i></em>
                                                    </div>
                                            </div>
                                            <div class="book-cell">
                                                <div class="book-title-x">
                                                    <h4 class="book-title">{{bookinfo.author}}</h4>
                                                </div>
                                                <p class="book-desc">暂无作者简介</p>
                                            </div>
                                            <svg t="1626278109428" class="icon myyou" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7903" width="16" height="16"><path d="M758.488 511.053c0-9.247-4.369-17.476-11.14-22.792L340.732 81.574c-5.243-5.243-12.525-8.447-20.535-8.447-16.02 0-28.982 12.962-28.982 28.982 0 8.01 3.204 15.291 8.52 20.534l388.556 388.629-388.556 388.555c-5.243 5.243-8.52 12.525-8.52 20.535 0 16.02 12.962 28.982 28.982 28.982 8.01 0 15.219-3.277 20.535-8.52L751.06 530.496h-0.146c4.733-5.098 7.573-11.942 7.573-19.443z" p-id="7904" fill="#cdcdcd"></path></svg>
                                        </a>
                                    </li>
                                </ol>
                            </div>
                        </div>
                        <div class="module">
                            <div class="module-header">
                                <div class="module-header-l">
                                    <h3 class="module-title">相关标签</h3>
                                </div>
                            </div>
                            <div class="module-content">
                                <div class="search-tags">
                                    
                                          <a href="javascript:void(0)" class="btn-line-gray" v-for="(item,index) in bookinfo.tags" :key="index">{{item}}</a>
                                    
                                </div>
                            </div>
                        </div>
                        
            </div>
        </div>
    </div>
    </div>
</template>
<script>
import {getBook} from '../api/index.js'
import 'vant/lib/index.css'
import { Dialog } from 'vant';
export default {
    data() {
      return {
        bookinfo:null,
        month:0,
        recommend:0,
        paynum:0,
        ispay:false,
        ismore:false
      }
    },
    methods: {
      addmonth(){
        this.month +=1;
      },
      addrecommend(){
        this.recommend +=1;
      },
      pay(){
        if(this.ispay==false){
          this.paynum += 1;
          this.ispay = true;
        }else{
          Dialog.alert({
                    message: '已经打赏过了',
                    theme: 'round-button',
                    }).then(() => {
                    // on close
                    });
        }
        
      },
      getBookFun(id){
        
        getBook(id).then(data=>{
          console.log(data);
          this.bookinfo = data;
        })
      },
      addshelf(){
        if(window.sessionStorage.getItem('login')){
        if(window.localStorage.getItem('shelflist')){
          let list = window.localStorage.getItem('shelflist');
          console.log(list);
          if(typeof(list) == 'string'){
            list=list.split(',')
          }          
          console.log(list);
          let have = list.some((item)=>{
            console.log(item);
            return item == this.bookinfo._id
          })
          console.log(have);
          if(!have){
            console.log(list);
            list.push(this.bookinfo._id);
              window.localStorage.setItem('shelflist',list)
               Dialog.alert({
                    message: '加入书架成功！',
                    theme: 'round-button',
                    }).then(() => {
                    // on close
                    });
          }else{
            Dialog.alert({
                    message: '已存在于书架中',
                    theme: 'round-button',
                    }).then(() => {
                    // on close
                    });
          }
          
        }else{
          let sl = [this.bookinfo._id]
          window.localStorage.setItem('shelflist',sl);
           Dialog.alert({
                    message: '加入书架成功！',
                    theme: 'round-button',
                    }).then(() => {
                    // on close
                    });
        }      
      }else{
        Dialog.alert({
                    message: '请先登录！',
                    theme: 'round-button',
                    }).then(() => {
                    // on close
                    this.$router.push('/login');
                    });
      }
      }
    },
    created(){
      this.getBookFun(this.$route.query.id)
        // this.bookinfo = this.$route.query
        // console.log(this.bookinfo);
    },
    filters: {
    wordcount: function (value) {
    if(value>100000){
      return (value/10000).toFixed(2)+'万';
    }
  }
}
}
</script>
<style lang="less">
.detail{
    header {
  position: relative;
  box-sizing: border-box;
  height: 2.75rem;
  padding-top: .6875rem;
  padding-bottom: .625rem;
  border-bottom: 1px solid #f0f1f2;
  background-color: #fff;
}

header > a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  padding: .625rem .8125rem .625rem .875rem;
}

header .header-title {
  font-size: .875rem;
  font-weight: 400;
  line-height: 2.375rem;
  position: absolute;
  left: 2.6875rem;
  overflow: hidden;
  max-width: 60%;
  white-space: nowrap;
  text-overflow: ellipsis;
  top: 0;
}

header .header-operate {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: .25rem .375rem;
}

header .header-operate a {
  float: left;
  overflow: hidden;
  width: 2.25rem;
  height: 2.25rem;
  text-align: center;
  line-height: 2.25rem;
}
}
.detail{
.page {
  width: 100%;
  min-height: calc(100vh - 8.75rem);
  background-color: #f6f7f9;
}



.guide {
  z-index: 3;
  top: 2.5rem;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  transition: visibility .25s;
}

.guide .guide-one {
  position: relative;
  overflow: hidden;
  margin-top: -2.75rem;
  width: 100%;
  display: block;
  z-index: 100;
}

.guide .guide-one > img {
  display: inline-block;
  position: absolute;
  top: -13.2rem;
  top: calc(50% - 87.5vw);
  width: 100%;
  height: 175vw;
  opacity: .02;
  opacity: calc(.1 + .05);
  -webkit-filter: blur(calc(17px + 1px));
  filter: blur(calc(17px + 1px));
}

.guide .guide-one .book-info {
  position: relative;
  padding-top: 2.75rem;
}

.guide .guide-one .book-info .book {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 1rem;
  -webkit-transition: padding-left .15s;
  transition: padding-left .15s;
}

.guide .guide-one .book-info .book > img {
  width: 5.25rem;
  height: 7rem;
  border-radius: 2px;
  box-shadow: none;
  font-size: 0;
  float: left;
  margin-right: .5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.guide .guide-one .book-info .book .book-cell {
  line-height: 1.4rem;
}

.guide .guide-one .book-info .book .book-cell .book-title {
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 100%;
  margin: 0;
}

.guide .guide-one .book-info .book .book-cell .book-author {
  font-size: .8125rem;
}

.guide .guide-one .book-info .book .book-cell .book.score {
  font-size: .75rem;
  color: rgba(116, 116, 116, 0.849);
}

.guide .guide-one .book-info .book .book-cell .book-meta {
  font-size: .75rem;
  overflow: hidden;
}

.guide .guide-one .book-info .book-btns {
  padding: 0 1rem 1rem;
}

.guide .guide-one .book-info .book-btns .btn-group {
  display: table;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  table-layout: fixed;
}

.guide .guide-one .book-info .book-btns .btn-group .btn-group-cell {
  font-size: 100%;
  font-weight: 400;
  display: table-cell;
  margin-left: .3333rem;
}

.guide .guide-one .book-info .book-btns .btn-group .btn-group-cell > a {
  display: block;
  width: calc(100% - .6667rem);
  margin-right: 1.3333rem;
  padding: 0;
  font-size: .8125rem;
  line-height: 1.875rem;
  display: inline-block;
  text-align: center;
  border-radius: .125rem;
  background-color: white;
}

.guide .guide-one .book-info .book-detail-btn {
  padding: 0 1rem 1rem;
}

.guide .guide-one .book-info .book-detail-btn > div {
  background-color: #ed424b;
  display: table;
  width: 100%;
  margin: 0 auto;
  table-layout: fixed;
  font-size: 100%;
  font-weight: 400;
  text-align: center;
  padding: 0.4rem 0;
}

.module {
  margin: .75rem 0;
  background-color: #fff;
}

.module-merge {
  margin: 0;
}

.book-summary.enabled {
  height: 5.92rem;
  
}

.book-summary {
  max-height: none;
  font-size: .875rem;
  line-height: 1.5rem;
  position: relative;
  overflow: hidden;
  // max-height: 5.92rem;
  margin-left: 1rem;
  padding-right: 1rem;
  text-align: justify;
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  box-shadow: 0 1px #f0f1f2, 0 -1px #f0f1f2;
}

.book-summary content {
  display: block;
}

.book-summary .book-summary-more {
  position: absolute;
  right: 1rem;
  bottom: 0;
  visibility: hidden;
  width: 2rem;
  height: 1.5rem;
  text-align: right;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #fff 1rem);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 1rem);
}

.enabled > .book-summary-more {
  visibility: visible;
}

.book-status {
  line-height: 2.75rem;
  display: block;
  padding: 0 1rem;
}

.book-status .book-meta-r {
  position: relative;
  max-width: 60%;
  max-width: calc(100% - (120rem / 16));
  padding-right: .75rem;
}

.book-meta {
  font-size: .75rem;
  overflow: hidden;
}

.book-meta-l {
  float: left;
}

.book-meta-r {
  float: right;
}

.book-spt {
  font-size: 1rem;
  vertical-align: top;
}

strong {
  font-weight: bold;
}

.ell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gray {
  color: #969ba3;
}

p {
  word-break: break-all;
  margin: 0;
}

.char-dot, .char-pipe {
  font-family: Georgia,Helvetica,Arial;
  padding: 0 .5ch;
}

.myyou {
  position: absolute;
  top: 0.85rem;
  right: -0.3rem;
  color: #969ba3;
}

.mr0 {
  margin-right: 0px;
}

.book-score {
  font-size: .75rem;
}

.module {
  margin: .75rem 0;
  background-color: #fff;
}

.module ul {
  display: table;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  table-layout: fixed;
}

.module ul li {
  font-size: 100%;
  font-weight: 400;
  display: table-cell;
}

.module ul li a {
  position: relative;
  display: block;
  padding: .75rem 0 .5rem;
  text-align: center;
}

.module ul li a .icon path {
  width: 1rem;
  font-size: 2.25rem;
  margin-bottom: .125rem;
  color: #ed424b;
}

.module ul li a .book-pay-h {
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.25em;
  position: relative;
  top: .125rem;
  margin: 0;
}

.module ul li a .book-pay-p {
  font-size: .75rem;
  -webkit-transform: scale(0.8333);
  transform: scale(0.8333);
  white-space: nowrap;
  color: #969ba3;
}

.funs-num {
  font-size: .875rem;
  margin-right: 6px;
}

.fans-li {
  font-size: .8125rem !important;
  padding: 1.5rem 0 1rem;
  text-align: center;
}

.book-fans-me {
  float: right;
  width: 25%;
  border-left: 1px solid #f0f1f2;
}

.fans-cover {
  width: 2.625rem;
  height: 2.625rem;
  vertical-align: bottom;
  border-radius: 3rem;
  box-shadow: 0 0 1px rgba(150, 155, 163, 0.3);
}

.fans-name {
  margin: .3125rem .25rem 0;
}

.ell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.char-dot, .char-pipe {
  font-family: Georgia,Helvetica,Arial;
  padding: 0 .5ch;
}

.book-fans-cell {
  padding: 0 .5rem;
}

.cell {
  display: table-cell;
  width: 1920px;
  width: 101vw;
}

.btn-group {
  display: table;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  table-layout: fixed;
}

.btn-group-cell {
  font-size: 100%;
  font-weight: 400;
  display: table-cell;
}

.module-header, .page-book-end .module-header {
  line-height: 1.75rem;
  display: block;
  overflow: hidden;
  padding: .5rem 1rem;
  border-top: 0;
}

.module-header {
  height: 1.75rem;
  padding: 0 1rem;
}

.module-header-l {
  float: left;
}

.page-book-detail .module-title, .page-book-end .module-title {
  font-family: inherit;
  font-weight: 700;
}

.module-title {
  font-family: FZZCYSK;
  font-weight: 400;
  display: inline;
  color: #33373d;
}

.book-author-vv .tag-honor, .rel > .tag-honor {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -1.25rem;
}

.book-layout {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 1rem;
  -webkit-transition: padding-left .15s;
  transition: padding-left .15s;
}

.book-author-vv {
  position: relative;
  float: left;
  width: 3rem;
  height: 3rem;
  margin-right: .75rem;
}

.book-author-avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}

.book-cell {
  overflow: hidden;
}

.book-title-x {
  display: block;
  overflow: hidden;
}

.book-title {
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.book-ol-author .book-desc:last-child {
  margin-right: 1.5rem;
}

.book-ol-author .book-desc {
  white-space: nowrap;
  text-overflow: ellipsis;
}

.book-desc {
  font-size: .875rem;
  line-height: 1.125rem;
  overflow: hidden;
  margin: .375rem 0;
  color: #969ba3;
}

.search-tags {
  padding: .25rem .5rem .75rem 1rem;
}

.search-tags .btn-line-gray {
  margin: .5rem .5rem 0 0;
  color: #969ba3;
  font-size: .8125rem;
  line-height: 1.6875rem;
  display: inline-block;
  padding: 0 .625rem;
  text-align: center;
  border: 1px solid;
  border-radius: 99px;
}

.footer-backtop {
  display: table;
  width: 100%;
  text-align: center;
}

.footer-backtop-cell {
  font-size: .875rem;
  line-height: 3.4375rem;
  display: table-cell;
  padding: 0 1rem;
  border-bottom: 1px solid #f0f1f2;
}

.blue {
  color: #4284ed;
}

.footer-link {
  font-size: .875rem;
  display: flex;
//   display: -webkit-box;
//   display: box;
  padding: .5625rem 1.1875rem 0;
  text-align: center;
  color: #969ba3;
  justify-content: space-between;
//   -webkit-box-pack: justify;
  box-pack: justify;
}

.footer-link-a {
  display: block;
  padding: .5rem 0;
  -webkit-box-flex: 1;
  box-flex: 1;
}

.dark {
  color: #33373d;
}

.footer-copy {
  font-size: .75rem;
  font-weight: 300;
  padding-top: .25rem;
  padding-bottom: 1rem;
  text-align: center;
  color: #969ba3;
}

.footer {
  background-color: #fff;
}

.footer-app {
  position: relative;
  display: block;
  box-sizing: border-box;
  height: 3.75rem;
  padding: .75rem 6rem 0 4rem;
  background-color: #f6f7f9;
}

.footer-app-h {
  font-size: .875rem;
}

.footer-app-p {
  font-size: .75rem;
  color: #969ba3;
}

.footer-app .btn-primary-small {
  position: absolute;
  top: 0;
  right: 1rem;
  bottom: 0;
  height: 1.625rem;
  margin: auto;
}

.btn-primary-small {
  line-height: 1.625rem;
}

.btn-primary, .btn-primary-small {
  font-size: .875rem;
  line-height: 2.25rem;
  display: inline-block;
  padding-right: 1em;
  padding-right: 2ch;
  padding-left: 1em;
  padding-left: 2ch;
  text-align: center;
  color: #fff;
  border-radius: 99px;
  background-color: #ed424b;
}
}

</style>